<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <!--count="0" 传给子组件是一个字符串
        :count="0" 传给子组件是一个数字-->
    <counter :count="count1" @increment="handleIncrement"></counter>
    <counter :count="count2" @increment="handleIncrement"></counter>
    <div>{{total}}</div>
</div>
<script>
    var counter = {
        template: '<div @click="handleClick">{{number}}</div>',
        // 指定接收父组件传值的属性
        props: ['count'],
        data: function () {
            return {
                //拷贝一份父组件的传值
                number: this.count
            }
        },
        methods: {
            handleClick: function () {
                // 错误写法，子组件不应该修改父组件传递的值（单向数据流）
                // this.count++
                // 正确写法，修改父组件传值的副本
                this.number++;
                // 子组件向父组件传值，通过事件驱动的形式来进行
                this.$emit('increment', 1);
            }
        }
    };
    var app = new Vue({
        el: '#app',
        data: {
            count1: 0,
            count2: 1,
            total: 1
        },
        components: {
            counter: counter
        },
        methods: {
            handleIncrement: function (step) {
                this.total += step;
            }
        }
    });
</script>
</body>
</html>